
<template>
  <div class="page-content">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="banquet-content">
      <div class="list">
        <div v-for="banquet in banquetList" :key="banquet.id" class="banquet-card" @click="toDetail(banquet.id)">
          <div>序号{{banquet.id}}</div>
          <div>{{banquet.name}}</div>
          <div>{{banquet.reason}}</div>
          <div>{{banquet.remark}}</div>
          <div>{{banquet.crtTime}}</div>
        </div>
      </div>
      <el-pagination  class="page-tool"
                      background
                      layout="sizes,prev, pager, next"
                      :current-page="page.pageNum"
                      :page-sizes="page.pageSizes"
                      :page-size="page.pageSize"
                      :total="page.total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      @prev-click="handlerPrevClick"
                      @next-click="handlerNextClick"
      >
      </el-pagination>
    </div>
    <el-button type="primary" icon="el-icon-plus" class="add" @click="addBanquet"></el-button>
  </div>
</template>

<script>
import PageUtil from "@/utils/PageUtil";
import ResultUtil from "@/utils/ResultUtil";
export default {
  name:'BanquetList',
  data(){
    return {
      banquetList: [],
      page:PageUtil.defaultPage(),
      currentId:'',
    }
  },
  methods:{
    async getBanquetPageList(){
      let result = await this.$API.reqBanquetPageList(PageUtil.toRequestPage(this.page));
      if(ResultUtil.isSuccess(result)){
        this.banquetList = result.data.list;
        this.page = PageUtil.extractPage(result.data);
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getBanquetPageList();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getBanquetPageList();
    },
    handlerPrevClick(val){
      this.page.pageNum = val;
      this.getBanquetPageList();
    },
    handlerNextClick(val){
      this.page.pageNum = val;
      this.getBanquetPageList();
    },
    addBanquet(){
      this.$router.push(`/banquet/add`)
    },
    toDetail(id){
      this.$router.push(`/banquet/giftMoneyList?banquetId=${id}`)
    }
  },
  mounted() {
    this.getBanquetPageList();
  }
}
</script>

<style scoped>
.page-content {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.add{
  position: absolute;
  top: 20px;
  right: 0;
}

.banquet-content{
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  min-height: calc(100vh - 120px - 4px);
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow-x: hidden;
}

@keyframes banquet-card-frame {
  /* 第一帧 */
  0% {

  }
  /* 最后一帧 */
  100% {
    transform: translateX(150vw);
    background-color: red;
  }
}

.banquet-card{
  width: 300px;
  height: 400px;
  border-radius: 20px;
  margin: 20px 20px;
  transition: 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;

  border: 1px solid #fff;
  font-size: 18px;
  background:rgb(255,255,255,0.1);
  backdrop-filter: blur(5px);

  /* 应用动画到元素 */
  animation-name: banquet-card-frame;
  /* 动画持续的时间 */
  animation-duration: 1s;
  animation-direction: reverse;
  animation-timing-function: cubic-bezier(0.585, 0.130, 0.875, 1.425);
}

.banquet-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #409EFF;
  font-size: 22px;
}

.banquet-card div {
  cursor: pointer;
  margin: 15px 0px;
}

.page-tool {
  height: 100px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content .color{
  position: absolute;
  filter: blur(200px);
}

.page-content .color:nth-child(1){
  top: -350px;
  width: 600px;
  height: 600px;
  background: #ff359b;
}

.page-content .color:nth-child(2){
  bottom: 100px;
  left: 100px;
  width: 500px;
  height: 500px;
  background: #fffd87;
}

.page-content .color:nth-child(3){
  bottom: 150px;
  right: 100px;
  width: 500px;
  height: 500px;
  background: #00d2ff;
}

</style>
